<template>
	<view class="setPwd">
		<view class="head">
			<view class="head_li">
				<uni-icons type="back" size="30" color="#fff" class="icon_back"
					@click="navigBack"></uni-icons>
			</view>
		</view>
		<view class="body">
			<view class="b_head">
				<text>设置新密码</text>
				<view class="ask">
					<text>密码尽量保证6位到12位</text>
					<text>密码尽量包含数字和字母</text>
				</view>
			</view>
			<view class="form">
				<view class="pwd" v-show="Info === ''">
					<view class="text">账号</view>
					<view class="input">
						<input class="i_put" type="number" v-model="account" maxlength="11"/>
					</view>
				</view>
				<view class="pwd">
					<view class="text">新密码</view>
					<view class="input">
						<input class="i_put" type="password" v-model="pwd" maxlength="15" @input="clearInput" />
						<image src="../../static/audio-icons/Enter_delete.png" class="clear_icon" v-show="show"
							@click="clearIcon"></image>
					</view>
				</view>
				<view class="pwd">
					<view class="text">确认密码</view>
					<view class="input">
						<input class="i_put" type="password" v-model="pwd2" maxlength="15" @input="clearInput2" />
						<image src="../../static/audio-icons/Enter_delete.png" class="clear_icon" v-show="show2"
							@click="clearIcon2"></image>
					</view>
				</view>
				<view class="yzm">
					<input class="i_put" type="text" v-model="yzm" maxlength="6" placeholder="请输入验证码" />
					<image :src="yzmSrc" @click="captchaImg"></image>
				</view>
			</view>
			<view class="btom">
				<view class="butom" :style="{backgroundColor:(pwd.length<6||pwd.length>12)?'rgba(87, 177, 255, 0.5)':'rgba(87, 177, 255, 1)'}"
				 @click="updatePwd">修改</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
	} from 'vuex'
	import { captcha,setPwdCaptcha,outLogin } from '../../common/api';
	export default {
		computed: {
			...mapState('info', ['myInfo']),
		},
		data() {
			return {
				pwd: '',
				show: false,
				pwd2: '',
				show2: false,
				yzm: '',
				yzmSrc: null,
				account:'',
			    Info:uni.getStorageSync('myInfo')
			};
		},
		created() {
			this.captchaImg();
		},
		methods: {
			navigBack() {
				uni.navigateBack()
			},
			clearIcon() {
				this.pwd = '';
				this.show = false;
			},
			clearInput(event) {
				this.pwd = event.detail.value;
				if (event.detail.value.length > 0) {
					this.show = true;
				} else {
					this.show = false;
				}
			},
			clearIcon2() {
				this.pwd2 = '';
				this.show2 = false;
			},
			clearInput2(event) {
				this.pwd2 = event.detail.value;
				if (event.detail.value.length > 0) {
					this.show2 = true;
				} else {
					this.show2 = false;
				}
			},
			captchaImg() {
				captcha().then((res) => {
					let base64String = uni.arrayBufferToBase64(res);
					this.yzmSrc = `data:image/png;base64,${base64String}`;
				})
			},
			updatePwd(){
				if(this.Info === '' &&this.account.length != 11){
					uni.showToast({
						title: '账号为11位',
						duration: 1000,
						icon: 'error'
					});
				}
				if(this.pwd.length<6 || this.pwd.length>12) return;
				if(this.pwd != this.pwd2){
					uni.showToast({
						title: '密码不一致',
						duration: 1000,
						icon: 'error'
					});
					return;
				}
				if (this.yzm.length != 4) {
					uni.showToast({
						title: '验证码不正确',
						duration: 1000,
						icon: 'error'
					});
					this.captchaImg();
					return;
				}
				setPwdCaptcha({
					id:this.myInfo.id,
					account:this.account,
					newPwd:this.pwd,
					captcha:this.yzm
				}).then((res)=>{
					if(res.code == 200){
						uni.showToast({
							title: '修改成功，请重新登录',
							duration: 1000,
						});
						if(this.Info === ''){
							uni.navigateTo({
								url: '/subpkg/login/login'
							})
							return;
						}
						outLogin({id:this.myInfo.id}).then((res)=>{
							if(res.code == 200){
								uni.removeStorageSync('myInfo');
								uni.navigateTo({
									url: '/subpkg/login/login'
								})
							}
						});
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.setPwd {
		.head {
			background: linear-gradient(90deg, rgba(122, 220, 241, 1) 0%, rgba(43, 163, 242, 1) 48%);
			width: 750rpx;
			height: 150rpx;
			position: fixed;

			.head_li {
				position: absolute;
				bottom: 0;
				width: 750rpx;
				height: 120rpx;
				display: flex;
				line-height: 100rpx;
				padding: 0rpx 0rpx;

				.icon_back {
					padding: 15rpx 20rpx;
				}
			}
		}

		.body {
			position: fixed;
			top: 150rpx;
			width: 750rpx;
			height: 650rpx;

			.b_head {
				font-size: 50rpx;
				font-weight: bold;
				padding: 30rpx;
				color: #404040;
				display: flex;
				.ask{
					display: flex;
					flex-direction: column;
					margin-left: 80rpx;
					font-size: 30rpx;
					color: #8c8c8c;
					text{
						padding: 5rpx;
					}
				}
			}

			.form {
				height: 400rpx;

				.pwd {
					height: 100rpx;
					font-size: 38rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 0 20rpx;

					.input {
						width: 500rpx;
						height: 100rpx;
						display: flex;
						align-items: center;

						.i_put {
							border-bottom: 1rpx solid #404040;
							height: 80rpx;
							font-size: 38rpx;
							padding: 0 20rpx;
						}

						.clear_icon {
							width: 40rpx;
							height: 40rpx;
							background-color: #3ed4f1;
							border-radius: 50rpx;
						}
					}
				}
				.yzm{
					height: 100rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding:10rpx 30rpx;
					.i_put {
						border-bottom: 1rpx solid #404040;
						width: 400rpx;
						height: 80rpx;
						padding: 0 10rpx;
					}
					image {
						margin-left: 20rpx;
						width: 250rpx;
						height: 90rpx;
					}
				}
			}
			.btom{
				height: 200rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				
				.butom{
					width: 550rpx;
					height: 100rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: rgba(43, 163, 242, 0.8);
					border-radius: 10rpx;
					&:active{
						transform: scale(0.98);
					}
				}
			}
		}
	}
</style>